<template>
	<view class="apply-goods-item">
		<view class="goods-img">
			<base-img :src='item.goods_image'></base-img>
		</view>
		<view class="goods-info">
			<view class="goods-name line-ellipsis">{{item.goods_name}}</view>
		</view>
		<view class="goods-right">
			<view class="goods-price">
				<text>￥</text>{{item.order_pay_money}}<text v-if='item.goods_unit' class="unit">/{{item.goods_unit}}</text>
			</view>
			<view class="goods-num">共{{item.total_num}}件</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:Object
		}
	}
</script>

<style lang="scss" scoped>
	.apply-goods-item {
		display: flex;
		justify-content: space-between;
	
		.goods-img {
			width: 176rpx;
			height: 176rpx;
			flex-shrink: 0;
			margin-right: 16rpx;
			border-radius: 8rpx;
			overflow: hidden;
		}
	
		.goods-info {
			flex: 1;
			overflow: hidden;
			margin-top:26rpx;
			.goods-name {
				width: 100%;
				-webkit-line-clamp: 2;
			}
		}
	
		.goods-right {
			text-align: right;
			margin-left: 20rpx;
			margin-top:26rpx;
			.goods-price {
				font-size: 32rpx;
	
				text {
					font-size: 24rpx;
				}
			}
	
			.goods-num {
				font-size: 24rpx;
				color: #AFB0B2;
				line-height: 36rpx;
			}
		}
	}
	.unit{
		color: #AFB0B2;
		font-size: 20rpx;
	}
</style>